import React, { useMemo } from 'react'
import { COLUMNS } from "./columns"
import MOCK_DATA from "./MOCK_DATA.json"
import { useTable, usePagination } from 'react-table'
import "./table.css"
const PaginationTable = () => {
    const columns = useMemo(() => COLUMNS, [])
    const data = useMemo(() => MOCK_DATA, [])
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        footerGroups,
        rows,
        prepareRow,
        // 分页数据
        page,
        // 跳转到下一页
        nextPage,
        // 跳转到上一页
        previousPage,
        // 是否存在下一页
        canNextPage,
        // 是否存在上一页
        canPreviousPage,
        // 一共有多少页
        pageCount,
        state,
        gotoPage,
        setPageSize
    } = useTable(
        {
            columns,
            data,
            initialState: {
                pageSize: 25
            }
        }, usePagination)
    const { pageIndex, pageSize } = state
    return (
        <>
            <table {...getTableProps()}>
                <thead>
                    {headerGroups.map(headerGroup => (
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {
                                headerGroup.headers.map(item => (
                                    <th {...item.getHeaderProps()}>{item.render("Header")}</th>
                                ))
                            }

                        </tr>
                    ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                    {
                        page.map(row => {
                            prepareRow(row)
                            return (
                                <tr {...row.getRowProps()}>
                                    {
                                        row.cells.map(cell => <td {...cell.getCellProps()}>{cell.render("Cell")}</td>)
                                    }
                                </tr>
                            )
                        })
                    }
                </tbody>
                <tfoot>
                    {footerGroups.map(footGroup => (
                        <tr {...footGroup.getFooterGroupProps()}>
                            {footGroup.headers.map(column => (
                                <td {...column.getFooterProps()}>{column.render("Footer")}</td>
                            ))}
                        </tr>
                    ))}
                </tfoot>
            </table >
            <div>
                <span>{pageIndex + 1}/{pageCount}</span>
                <input type="number" value={pageIndex + 1} style={{ width: 50 }} onChange={event => gotoPage(Number(event.target.value) - 1)} />
                <select value={pageSize} onChange={event => setPageSize(Number(event.target.value))}>
                    {[10, 25, 50].map(pagesize => (
                        <option key={pagesize} value={pagesize}>
                            显示 {pagesize} 条数据
                        </option>
                    ))}
                </select>
                <button disabled={!canPreviousPage} onClick={() => gotoPage(0)}>第一页</button>
                <button disabled={!canPreviousPage} onClick={() => previousPage()}>上一页</button>
                <button disabled={!canNextPage} onClick={() => nextPage()}>下一页</button>
                <button disabled={!canNextPage} onClick={() => gotoPage(pageCount - 1)}>最后一页</button>
            </div>
        </>
    )
}

export default PaginationTable